<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
	  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <style>
      body{
        position: fixed;
        z-index: 99999;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
      }
      #nc{
        margin-top: 10px;
      }
      .box{
        background-color: #ffffff;
        width: 300px;
        height: 135px;
        border-radius: 10px;
        padding: 0 15px;
      }
      .text{
        font-size: 16px;
        color: #000000;
        text-align: center;
        margin-top: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid #efefef;
      }
      .text_bottom{
        text-align: center;
        font-size: 16px;
        color: #6c6868;
        margin-top: 10px;
      }
      .nc_scale,.btn_slide,.slidetounlock {
        height: 40px !important;
        line-height: 40px !important;
        box-sizing: border-box;
      }
    </style>
</head>

<body>
  <div class="box">
    <div class="text">滑动验证</div>
    <div class="text_bottom"></div>
    <div id="nc"></div>
  </div>
</body>
<script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>
<script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script>
<script>
        // 实例化nc
        AWSC.use("nc", function (state, module) {
            // 初始化
            window.nc = module.init({
                // 应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
                appkey: "FFFF0N0000000000AE91",
                //使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的scene值，请务必正确填写。
                scene: "nc_register_h5",
                // 声明滑动验证需要渲染的目标ID。
                renderTo: "nc",
                //前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将会话ID（sessionId）、签名串（sig）、请求唯一标识（token）字段记录下来，随业务请求一同发送至您的服务端调用验签。
                success: function (data) {
                    data.pagestate = true
                    window.parent.postMessage(data,'*');
                    // window.console && console.log(data.sessionId)
                    // window.console && console.log(data.sig)
                    // window.console && console.log(data.token,'token')
                    // window.postMessage("sendMessage", '*');
                    window.nc.reset()  
                },
                // 滑动验证失败时触发该回调参数。
                fail: function (failCode) {
                    window.console && console.log(failCode)
                },
                // 验证码加载出现异常时触发该回调参数。
                error: function (errorCode) {
                    window.console && console.log(errorCode)
                }
            });
        }) 
  
</script>
</html>